<template>
	<div style="margin-bottom: 10px;">
		<!-- <div class="textCenter font12  iconfont icon-qianming " v-show="isshowIcon && content!=''"> </div> -->
		<div class="textCenter font12  iconfont icon-qianming " v-show="isshowIcon"> </div>
		<div :class="textAlign">
			<div ref="textContainer" class="font12 shs-signcolor shs-signature " :class="{text:!isExpanded}">{{content||"暂无签名"}}</div>
		</div>
		<div v-show="isExpandable" class="font12  cursorPointer" style="color: #575476;">
			<div v-show="isExpanded" @click="toggleExpand">收起</div>
			<div v-show="!isExpanded" @click="toggleExpand">... 更多</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: "暂无签名"
			},
			isshowIcon: {
				type: Boolean,
				default: true
			},
			textAlign:{
				type: String,
				default: "textCenter"
			},
		},
		data() {
			return {
				isExpanded: false,
				lineHeight: 1.5,
				maxVisibleLines: 3,
				isExpandable:false,
				content:""
			};
		},
		computed:{
		
		},
		methods: {
			checkExpand() {
				const measurementDiv = document.createElement('div');
				measurementDiv.style.position = 'absolute';
				measurementDiv.style.visibility = 'hidden';
				measurementDiv.style.whiteSpace = 'pre-line'; // 保留空白和换行
				measurementDiv.style.wordWrap = 'normal'; // 防止单词被断开
				measurementDiv.style.fontSize = getComputedStyle(this.$refs.textContainer).fontSize; // 设置相同的字体大小
				measurementDiv.style.lineHeight = `${this.lineHeight}em`; // 设置相同的行高
				measurementDiv.innerHTML = this.text;
				document.body.appendChild(measurementDiv);
				const textHeight = measurementDiv.scrollHeight;
				document.body.removeChild(measurementDiv);
				const lineCount = Math.ceil(textHeight / (parseFloat(getComputedStyle(this.$refs.textContainer).fontSize) *
					this.lineHeight));
				this.isExpanded = lineCount < this.maxVisibleLines;
				this.isExpandable = lineCount > this.maxVisibleLines;
				
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
		},
		mounted() {
			window.addEventListener('resize', this.checkExpand);
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.checkExpand);
		},
		watch:{
			text: {
				deep: true, // 深度监听
				immediate: true, // 页面初始化时是否触发回调
				handler: function(value, oldVal) {
					if (!value) {
						return
					}
					this.$nextTick(()=>{
						this.content=value;
						this.checkExpand();
					})
				}
			},
		}
	};
</script>

<style>
	/* 用户签名 */
	.shs-signature {
		text-align: left;
		display: inline-block;
		overflow-wrap: anywhere;
		white-space: pre-line;
	}

	.text {
		max-height: 65px;
		line-height: 20px;
		overflow: hidden;
	}
</style>